<template>
  <div class="EScroll">
    <!-- <div class="list-wr"> -->
    <vueSeamlessScroll :data="list" :class-option="classOption">
      <div v-for="(item, idx) in list" :key="idx">
        <div class="table-item-wrap">
          <div class="tab-1">
            <div :class="getTagColor(item.UseState)"></div>
          </div>
          <div class="tab-2">{{item.WorkCellCode}}</div>
          <div class="tab-3">{{item.StopTime}}</div>
          <div class="tab-4">{{item.StopTimeSum}}</div>
          <div class="tab-5">
            <el-progress :percentage="toInt(item.UsePercent)" :color="customColor" :format="format"></el-progress>
          </div>
        </div>
      </div>
      <!-- UseState WorkCellCode StopTime StopTimeSum UsePercent -->
    </vueSeamlessScroll>
  </div>
  <!-- </div> -->
</template>
<script>
  // 1正常 0未使用 2异常
  // import * as echarts from 'echarts';
  import vueSeamlessScroll from "vue-seamless-scroll";

  export default {
    props: ["list"],
    components: {
      vueSeamlessScroll
    },
    data() {
      return {
        percentage: 20,
        customColor: '#409eff',
        timer1: "",
        animate: false,
      }
    },
    computed: {
      classOption() {
        return {
          step: 0.5, // 数值越大速度滚动越快
          limitMoveNum: 15, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        };
      },
    },
    mounted() {
      // this.timer1 = setInterval(this.scroll, 1000);
    },
    methods: {
      getTagColor(val) {
        if (val == 0) {
          return "tag-0"
        } else if (val == 1) {
          return "tag-1"
        } else if (val == 2) {
          return "tag-2"
        } else {
          return "tag-0"
        }
      },
      toInt(percent) {
        var str = percent.replace("%", "");
        return str;
      },
      scroll() {
        this.animate = !this.animate;
        var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
        setTimeout(function () {
          that.list.push(that.list[0]);
          that.list.shift();
          that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
        }, 500)
      },
      mEnter() {
        clearInterval(this.timer1)
      },
      mLeave() {
        this.timer1 = setInterval(this.scroll, 1000)
      },
      format(percentage) {
        return percentage === 100 ? '满' : `${percentage}`;
      }
    },
  }

</script>

<style lang="scss">
  .EScroll {
    background: #111825;
    height: 100%;

    overflow: hidden;
    cursor: pointer;

    // .list-wr {
    //   cursor: pointer;
    // }

    .el-progress__text {
      color: white;
    }

    .el-progress-bar__outer {
      background: #25303E;
    }

    .t-t {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #FF486F;
    }

    .su-t {
      font-size: 12px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #999999;
    }

    .tag-1 {
      width: 15px;
      height: 15px;
      background: #1DD27D;
      border-radius: 50%;
    }

    .tag-0 {
      width: 15px;
      height: 15px;
      background: #EBDB2C;
      border-radius: 50%;
    }

    .tag-2 {
      width: 15px;
      height: 15px;
      background: #FF486F;
      border-radius: 50%;
    }

    .top-item-w {
      display: flex;
      justify-content: space-between;
      padding: 10px 20px;
    }

    .item-bt {
      width: 175px;
      height: 46px;
      border: 1px solid #353F4C;
      text-align: center;
      padding-top: 7px;
    }

    .table-wrap {
      margin: 20px
    }

    .table-item-wrap {
      display: flex;
      justify-content: space-around;
      margin: 20px 0px;

      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #FFFFFF;
      display: flex;
      justify-content: space-around;
      text-align: center;
    }

    .tab-1 {
      width: 15%;
      display: flex;
      justify-content: center;
    }

    .tab-2 {
      width: 15%;

    }

    .tab-3 {
      width: 20%;

    }

    .tab-4 {
      width: 20%;

    }

    .tab-5 {
      width: 30%;

    }



    .bottom-item {
      // position: absolute;
      // bottom: 0;
      display: flex;
      justify-content: space-around;
      color: white;
      width: 100%;
      height: 50px;
      text-align: center;
      padding-top: 20px;

      .i-m {
        display: flex;
      }

      .it-1 {
        width: 30px;
        height: 14px;
        background: #1DD27D;
        border-radius: 7px;
        margin-right: 5px;
      }

      .it-2 {
        width: 30px;
        height: 14px;
        background: #EBDB2C;
        border-radius: 7px;
        margin-right: 5px;

      }

      .it-3 {
        width: 30px;
        height: 14px;
        background: #FF486F;
        border-radius: 7px;
        margin-right: 5px;

      }
    }
  }

</style>
